import { NavBar, Space, Toast } from 'antd-mobile'
import { SearchOutline, MoreOutline, CloseOutline, LeftOutline, UserAddOutline, AppOutline, UserOutline, ScanningOutline } from 'antd-mobile-icons'
import { useCommonFunc } from '../hooks/useCommon'
import React, { FC } from 'react'
import { useLocation } from 'react-router-dom'
import { Button, Popover } from 'antd-mobile'
import { Action } from 'antd-mobile/es/components/popover'
import { useSelector } from 'react-redux'
import { App_userInfo } from '../rtk/reducers/infoSilce'
import "./head.scss"

const MyHead:FC<{
    title?:string,
    children?:any
    noback?:boolean
}> = ({
    title="标题",
    children,
    noback
}) => {
    const userInfo = useSelector(App_userInfo) // null 没有登录就显示 有值就已经登录了 就不显示 
    const { gotopage } = useCommonFunc()
    const { pathname } = useLocation()

    const actions: any = [
      { key: '/scan', icon: <ScanningOutline />, text: '扫一扫' ,disabled:pathname=='/scan'},
      { key: '/app/home', icon: <AppOutline />, text: '首页' ,disabled:pathname=='/app/home'}, 
      { key: '/app/mine', icon: <UserOutline />, text: '个人中心' ,disabled:pathname=='/app/mine' },
      !userInfo ? { key: '/login', icon: <UserAddOutline />, text: '登录注册' ,disabled:pathname=='/login'}
      : { key: '/myinfo', icon: <UserAddOutline />, text: '我的信息' ,disabled:pathname=='/myinfo'},
  ]

    const chooseAction = (node:any) => {
      console.log(node);
      gotopage(node?.key)
    }

    const right = (
        <div style={{ fontSize: 24 }}>
          <Space style={{ '--gap': '16px' }}>
            {pathname.indexOf("/search") == -1 && <SearchOutline onClick={()=>gotopage('/search')}/>}
            <Popover.Menu
                mode='dark'
                actions={actions}
                placement='topRight'
                trigger='click'
                onAction={chooseAction}
                >
                <MoreOutline />
            </Popover.Menu>
          </Space>
        </div>
      )

      // 左边 
      // 默认内容返回 
      // 没有
      // 固定的返回
      // 自定义内容
      const left = (
        noback?null : <div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
          {
            children?children:<Space style={{'--gap': '3px'}} onClick={()=>gotopage(-1)}>
              <LeftOutline style={{marginTop:3}}/>
              <span style={{ fontSize: 14 }}> 返回</span>
            </Space>
          }
        </div>
      )

  return (
      <NavBar right={right} left={left}  back={true}>{title}</NavBar>
  )
}

export default MyHead